<template>
    <el-card class="content">
        <div class="chart-warp" ref="chart">
        </div>
    </el-card>
</template>

<script>
    export default {
        name: "ClosedReminderBody",
        props:{
            vis:Boolean
        },
        data(){
            return{
                stockLine:[[0,0.9],[3.2,2.5],[6.3,3.1],[13,4.8]],
                closeLine:[[0,5],[13,5]],
            }
        },methods:{
            chartInit() {
                let that = this;
                let chartBody = this.$echarts.init(this.$refs.chart);
                let option = {
                    legend:{
                        data:['库容线','闭库线']
                    },
                    tooltip:{
                        trigger:'axis'
                    },
                    xAxis:{
                        name:'库容*10m^3',
                        nameLocation: 'center',
                        nameTextStyle:{
                            lineHeight:48,
                            fontSize: 16
                        },
                        max:'dataMax'
                    },
                    yAxis:{
                        name:'标高(m)',
                        nameTextStyle:{
                            lineHeight:48,
                            fontSize: 16
                        },
                        max:function (v) {
                            return v.max+2;
                        }
                    },
                    grid:{
                        x:80,
                        y:80,
                        x2:80,
                        y2:80
                    },
                    series:[
                        {
                            type:'line',
                            name:'库容线',
                            encode:{x:0,y:1},
                            data: that.stockLine,
                        },{
                            type:'line',
                            name:'闭库线',
                            encode:{x:0,y:1},
                            data: that.closeLine,
                        }
                    ]
                };
                chartBody.setOption(option);
            }
        },mounted() {
            this.chartInit();
        }
    }
</script>

<style scoped>
    .content {
        height: 87vh;
        margin-right: 5px;
    }
    .chart-warp{
        height: 84vh;
        display: block;
    }
</style>